<template>
  <view class="my-order">
    <view class="list" style="padding-bottom: 50rpx">
      <view
        class="item"
        v-for="(item, index) in orderList"
        :key="index"
        @click="goDetails(item)"
      >
        <view
          class="title"
          style="
            display: flex;
            justify-content: space-between;
            align-items: center;
          "
        >
          <view
            class="acea-row row-middle"
            style="display: flex; align-items: center"
          >
            <view v-if="item.merName">
              <navigator
                :url="`/pages/merchant/home/index?merId=${item.merId}`"
                hover-class="none"
              >
                <text class="iconfont icon-shangjiadingdan mr10"></text>
                <text class="mr10">{{ item.merName }}</text>
                <text class="iconfont icon-xiangyou"></text>
              </navigator>
            </view>
            <view v-else>
              <text class="mr10">{{ item.orderNo }}</text>
            </view>
          </view>
          <view v-if="item.refundStatus == 3" class="font_color">已退款</view>
          <template v-else>
            <view v-if="item.payType == 'offline'" class="font_color"
              >{{ item.status | orderStatusFilter }}-货到付款</view
            >
            <view v-else class="font_color">
              {{ item.status | orderStatusFilter }}
            </view>
          </template>
        </view>
        <view v-for="(items, indexs) in item.orderInfoList" :key="indexs">
          <view
            @tap="goOrderDetails(item)"
            class="item-info acea-row row-between row-top"
          >
            <view class="pictrue">
              <easy-loadimage
                mode="widthFix"
                :image-src="items.image"
              ></easy-loadimage>
            </view>
            <view class="text acea-row row-between">
              <view class="nameBox">
                <view class="name line2">
                  <span
                    v-if="Number(item.type) > 0 && Number(item.type) < 3"
                    class="activity bg_color"
                    >{{ item.type | orderTypeFilter }}</span
                  >
                  <span
                    v-if="Number(item.secondType) === 1"
                    class="activity bg_color"
                    >积分</span
                  >
                  <span>{{ items.productName }}</span>
                </view>
                <view class="sku line1">{{ items.sku }}</view>
              </view>
              <view class="money">
                <view>￥{{ items.price }}</view>
                <view
                  ><span
                    v-if="items.isStock == 0"
                    style="color: #ed7b2f; margin-right: 20rpx"
                    >缺货 {{ items.outOfStockNumber }}</span
                  >
                  x{{ items.payNum }}</view
                >
              </view>
            </view>
          </view>
          <view
            v-if="items.applyRefundNum && item.refundStatus > -1"
            class="text-24rpx font-color oppoSans-R mr-20px px-30 mt-14"
          >
            售后申请数量：{{ items.applyRefundNum }}
          </view>
        </view>
        <view class="totalPrice"
          >{{ item.totalNum }}
          件商品，总金额
          <text class="money"> ￥{{ item.totalPrice }}</text> 
        </view>
        <view
          class="totalPrice"
          v-if="item.isAdjustOrder === 1 && item.status === 0"
        >
          待支付差价 
          <text class="money" v-if="item.isCollectOnDelivery == 0"> ￥{{ item.differencePrice }}</text>
          <text class="money" v-else> ￥{{ item.totalPrice }}</text>
        </view>
        <!-- v-if="[10, 11, 12, 0].includes(item.status)" -->
        <view class="address">
          <view
            style="
              display: flex;
              justify-content: space-between;
              align-items: center;
            "
          >
            <view style="width: 70%">
              <view class="address_top">
                <text class="money">
                  {{ item.consigneeDetailedAddress }}
                </text>
                <view> </view>
              </view>
              <view
                class="address_bottom"
                style="
                  display: flex;
                  justify-content: space-between;
                  align-items: center;
                "
              >
                <view>
                  <text class="money">
                    {{ item.consigneeName }}
                  </text>
                  <span
                    style="margin: 0 16rpx; color: #1296db"
                    @tap.stop="makePhone(item.consigneePhone)"
                  >
                    {{ item.consigneePhone }}
                  </span>
                </view>
              </view>
            </view>

            <view
              class="toAddress"
              @tap.stop="
                gomapApp(
                  item.consigneeLatitude,
                  item.consigneeLongitude,
                  item.consigneeDetailedAddress
                )
              "
            >
              <image
                src="@/static/navigation.png"
                style="width: 26rpx; height: 26rpx; margin-left: 30rpx"
              ></image
              ><span style="color: #1296db">导航</span>
            </view>
          </view>
          <view
            class="bottom acea-row row-between row-middle"
            style="padding-left: 0"
          >
            <view>
              <span>下单时间：</span>
              <span style="color: #1296db">{{ item.createTime }}</span>
              <span
                v-if="isShowoutOfStock(item.orderInfoList)"
                style="
                  background-color: #ed7b2f;
                  color: #fff;
                  padding: 0 10rpx;
                  border-radius: 10rpx;
                  margin-left: 20rpx;
                "
                >缺货</span
              >
            </view>
            
            <view style="display: flex;align-items: center;">
            <view>
              配送预约时间：<span style="color: red"
                >{{item.extendDeliveryTimeStr}}</span
              >
            </view>
            <view v-if="item.extendDeliveryMinute!=0">
              <span style="background-color: #ED7B2F;color: #fff;padding: 0 10rpx;border-radius: 10rpx;margin-left: 20rpx;">已延长配送时间{{item.extendDeliveryMinute}}分钟</span>
            </view>
            <!-- <view v-else>
              <span style="color: red">即时配送</span>
            </view> -->
            <view v-if="[10,14].includes(item.status) && $store.state.app.userInfo.loginType == 2" class="bnt cancelBnt" @tap.stop="adjustmentDeliveryTime(item)" style="margin-left: 20rpx;">
              调整配送时间
            </view>
            </view>
          </view>
        </view>
        <view
          class="bottom acea-row row-between row-middle"
          style=""
          v-if="item.cancelReason"
        >
          <view>
            <span v-if="item.cancelOrderUserType == 1">取消原因</span>
            <span v-else-if="item.cancelOrderUserType == 2">异常配送</span
            >：<span style="color: red">{{ item.cancelReason }}</span>
          </view>
        </view>
        <view class="bottom acea-row row-right row-middle" style="justify-content: flex-end;;">
          <view
            class="bnt cancelBnt"
            @tap.stop="makePhone(item.consigneePhone)"
          >
            联系客户
          </view>
          <view
            class="bnt cancelBnt"
            @tap.stop="makePhone(item.deliveryPersonnelPhone)"
            v-if="
              $store.state.app.userInfo.loginType == 2 &&
              [12].includes(item.status)
            "
          >
            联系骑手
          </view>
          <view
            class="bnt qrCode"
            v-if="
              [10].includes(item.status) &&
              $store.state.app.userInfo.loginType == 2
            "
            @tap.stop="markCode(item.orderNo)"
          >
            配送码
          </view>
          <view
            class="bnt cancelBnt"
            v-if="
              [11].includes(item.status) &&
              $store.state.app.userInfo.loginType == 1
            "
            @tap.stop="onServed(item.orderNo)"
          >
            已送达
          </view>
          <view
            class="bnt cancelBnt"
            v-if="
              [12].includes(item.status) &&
              $store.state.app.userInfo.loginType == 1
              &&item.isAdjustOrder == 0
            "
            @tap.stop="adjustmentOrder(item.orderNo,item)"
          >
            订单调整 
          </view>
          <!-- v-if="
              [14].includes(item.status) &&
              $store.state.app.userInfo.loginType == 0 
            " -->
          <view
            class="bnt cancelBnt"
            @tap.stop="goOutbound(item.orderNo, 1)"
            v-if="
              [14].includes(item.status) &&
              $store.state.app.userInfo.loginType == 2
            "
          >
            备货出库
          </view>
          <view
            class="bnt cancelBnt"
            @tap.stop="goOutbound(item.orderNo, 0)"
            v-if="
              item.isStockUp == 1 && $store.state.app.userInfo.loginType == 2
            "
          >
            备货出库单
          </view>
          <view
            class="bnt qrCode"
            v-if="
              item.isCollectOnDelivery == '1' &&
              !item.paid &&
              $store.state.app.userInfo.loginType == 1 &&
              [12,0,'0','12'].includes(item.status)
            "
            @tap.stop="makeQrCode(item.orderNo)"
          >
            收款码
          </view>
          <view
            class="bnt qrCode"
            v-if="item.status == 12 && $store.state.app.userInfo.loginType == 1"
            @tap.stop="setException(item.orderNo)"
          >
            配送异常
          </view>
          <view
            class="bnt qrCode"
            v-if="
              item.inOrOutWarehouseSkuDetailsList &&
              item.inOrOutWarehouseSkuDetailsList.length > 0
            "
            @tap.stop="goReturnDetails(item)"
          >
            退货商品
          </view>
        </view>
      </view>
      <view class="noCart" v-if="orderList.length == 0">
        <view class="pictrue">
          <!-- <image :src="urlDomain+'crmebimage/presets/nodingdan.png'"></image> -->
          <view class="default_txt">暂无订单信息~</view>
        </view>
      </view>
    </view>
    <uni-popup
      @maskClick="handleMaskClick"
      ref="popup"
      type="center"
      background-color="#fff"
      border-radius="10px 10px 0 0"
    >
      <img :src="codeImg" />
    </uni-popup>
    <RefuseReasonDialog
      :show="refuseDialog"
      @close="handleRefuseClose"
      @submit="handleRefuseSubmit"
      :reasons="reasons"
    />
  </view>
</template>

<script>
import easyLoadimage from "@/components/base/easy-loadimage.vue";
import { strToBase64Api, refusedOrder, extendDeliveryTime } from "@/api/index.js";
import RefuseReasonDialog from "@/components/RefuseReasonDialog.vue";
import { gomapApp } from "@/utils/utils";
export default {
  components: {
    easyLoadimage,
    RefuseReasonDialog,
  },
  filters: {
    orderStatusFilter(status) {
      const statusMap = {
        0: "待付款",
        1: "待发货",
        2: "部分发货",
        3: "待自提",
        4: "待收货",
        5: "已收货",
        6: "已完成",
        9: "已取消",
        10: "待配送",
        11: "配送中",
        12: "已送达，待签收",
        14: "待备货",
      };
      return statusMap[status];
    },
  },
  props: {
    orderList: {
      type: Array,
      default: () => {},
    },
  },
  data() {
    return {
      show: true,
      codeImg: null,
      refuseDialog: false,
      refuseOrderNo: "",
      reasons: [
        "客户联系不上（等待20分钟）",
        "客户临时有事,无法收货",
        "客户地址错误",
      ],
    };
  },
  onLoad() {
    // uni.$on('handleException',(id) => {
    //   console.log(id, 271);
    //   this.setException(id);
    // })
  },
  computed: {},
  methods: {
    adjustmentDeliveryTime(ite){
       uni.showModal({
        title: '调整配送时间',
        content: '调整的送时间需联系客户沟通',
        confirmText: '联系客户',
        cancelText: '已联系',
        confirmColor: '#1296db',
        cancelColor: '#1296db',
        success: (res)   => {
          if(res.confirm){
            this.makePhone(ite.consigneePhone);
          }else{
            console.log('已联系');
            this.showTimeOptions(ite);
          }
        },
       })
    },
    showTimeOptions(ite) {
      uni.showActionSheet({
        itemList: ['延长30分钟', '延长60分钟', '延长90分钟', '延长120分钟'],
        success: (res) => {
          const timeOptions = [30, 60, 90, 120];
          const selectedTime = timeOptions[res.tapIndex];
          this.extendDeliveryTime(ite, selectedTime);
        },
        fail: () => {
          console.log('用户取消选择');
        }
      });
    },
    extendDeliveryTime(ite, hours) {
      // 这里可以调用后端接口来延长配送时间
     
      extendDeliveryTime({
        orderNo: ite.orderNo,
        extendDeliveryMinute: hours
      }).then(res => {
        if(res.code == 200){
          this.$emit('updateStatus');
          uni.showToast({
            title: `已延长配送时间${hours}分钟`,
            icon: 'success'
          });
        }
      });
      // TODO: 调用后端接口更新配送时间
      // extendDeliveryTimeApi({
      //   orderNo: ite.orderNo,
      //   extendHours: hours
      // }).then(res => {
      //   this.$emit('updateStatus');
      // });
    },
    handleMaskClick() {
      this.$refs.popup.close();
      this.$emit('handleMaskClick');
      console.log('handleMaskClick');
    },
    goReturnDetails(item) {
      if(this.$store.state.app.userInfo.loginType == 1){
        uni.navigateTo({
          url:
          "/pages/outBound/index?returnList=" +
            encodeURIComponent(
              JSON.stringify(item.inOrOutWarehouseSkuDetailsList)
            ) +
            "&inOrOutWarehouseStatus=" +
            item.inOrOutWarehouseStatus || 0,
        });
      }else{
      uni.navigateTo({
        url: `/pages/orderIn/detail?id=${item.inOrOutWarehouseOrdersId}&inOrOutWarehouseType=2`, //1:出 2:入
      });

      }
    },
    goOutbound(orderNo, type) {
      uni.navigateTo({
        url: "/pages/outBound/outBound?orderNo=" + orderNo + "&isAdd=" + type,
      });
    },
	
    isShowoutOfStock(value) {
      return value.some((item) => item.isStock == 0);
    },
    handleRefuseClose() {
      this.refuseDialog = false;
    },
    setException(id) {
      this.refuseDialog = true;
      this.refuseOrderNo = id;
      // this.$emit('setException', id);
    },
    handleRefuseSubmit(reason) {
      // 这里可以调用后端接口提交拒绝原因
      // 例如：refuseOrderApi({orderNo: this.refuseOrderNo, reason})
      this.refuseDialog = false;
      refusedOrder({
        orderNo: this.refuseOrderNo,
        cancelReason: reason,
        cancelOrderUserType: 2,
      }).then((res) => {
        this.$emit("updateStatus");
        uni.showToast({
          title: "操作成功",
          icon: "success",
        });
      });
    },
    makeQrCode(id) {
      uni.showActionSheet({
        itemList: ["支付宝", "微信"],
        success: (res) => {
          console.log(res);
          if (res.tapIndex == 0) {
            uni.navigateTo({
              url:
                "/pages/orderManage/qrcode?orderNo=" + id + "&payType=alipay",
            });
          } else if (res.tapIndex == 1) {
            uni.navigateTo({
              url:
                "/pages/orderManage/qrcode?orderNo=" + id + "&payType=weixin",
            });
          }
        },
      });
    },
    adjustmentOrder(code,item) {
   
      uni.navigateTo({
        url: "/pages/orderChange/orderChange?orderNo=" + code + "&isCollectOnDelivery=" + item.isCollectOnDelivery,
      });
    },
    onServed(code) {
      this.$emit("hasServed", code);
    },

    /**
     *
     * 生成二维码
     */
    markCode(text) {
      strToBase64Api({
        height: "250",
        text: text,
        width: "250",
      }).then((res) => {
        this.codeImg = res.data.code;
        this.$refs.popup.open();
      });
    },
    goOrderDetails(val) {},
    goDetails(val) {
      this.$emit("goDetails", val);
    },
    /**
     * 拨打电话
     */
    makePhone: function (e) {
      if (!e) {
        return uni.showToast({
          title: "暂无联系方式",
          icon: "none",
        });
      }
      uni.makePhoneCall({
        phoneNumber: e,
      });
    },
    // 打开的点击事件，传经纬度和地点名
    gomapApp(latitude, longitude, name) {
      gomapApp(latitude, longitude, name);
    },
  },
};
</script>

<style scoped lang="scss">
.my-order {
  /* #ifdef H5 */
  margin-top: 200rpx !important;
  /* #endif */
  /* #ifdef MP || APP-PLUS */
  margin-top: 200rpx !important;
  /* #endif */

  .header {
    height: 250rpx;
    padding: 0 30rpx;
  }
}

.my-order .header .picTxt {
  height: 190rpx;
}

.my-order .header .picTxt .text {
  color: rgba(255, 255, 255, 0.8);
  font-size: 26rpx;
  font-family: "Guildford Pro";
}

.my-order .header .picTxt .text .name {
  font-size: 34rpx;
  font-weight: bold;
  color: #fff;
  margin-bottom: 20rpx;
}

.my-order .header .picTxt .pictrue {
  width: 120rpx;
  height: 120rpx;
}

.my-order .header .picTxt .pictrue image {
  width: 100%;
  height: 100%;
}

.my-order .list {
  width: calc(88%) !important;
  margin: 0rpx auto 0 auto;
}

.my-order .list .item {
  background-color: #fff;
  border-radius: 14rpx;
  margin-bottom: 14rpx;
}

.nav {
  background-color: #fff;
  justify-content: space-between;
  align-items: center;
}

.nav .item {
  font-size: 26rpx;
  color: #282828;
  padding: 25rpx 0;
  display: inline-block;
  font-size: 26rpx;
}

.nav .item.on {
  /* #ifdef H5 || MP */
  font-weight: bold;
  /* #endif */
  /* #ifdef APP-PLUS */
  color: #000;
  /* #endif */
  position: relative;
  font-size: 30rpx;
}

.nav .item .num {
  margin-top: 18rpx;
}

.my-order .list {
  width: 690rpx;
  margin: 14rpx auto 0 auto;
}

.my-order .list .item {
  background-color: #fff;
  border-radius: 14rpx;
  margin-bottom: 14rpx;
}

.my-order .list .item .title {
  height: 84rpx;
  padding: 0 24rpx;
  border-bottom: 1rpx solid #eee;
  font-size: 28rpx;
  color: #282828;
}

.my-order .list .item .title .sign {
  font-size: 24rpx;
  padding: 0 13rpx;
  height: 36rpx;
  margin-right: 15rpx;
  border-radius: 18rpx;
}

.my-order .list .item .item-info {
  padding: 0 30rpx;
  margin-top: 22rpx;
}

.my-order .list .item .item-info .pictrue {
  width: 120rpx;
  height: 120rpx;
}

.my-order .list .item .item-info .pictrue image {
  width: 100%;
  height: 100%;
  border-radius: 14rpx;
  overflow: hidden;
}

.my-order .list .item .item-info {
  .nameBox {
    position: relative;
    height: 120rpx;
  }

  .sku {
    font-size: 20rpx;
    position: absolute;
    bottom: 4rpx;
    width: 420rpx;
  }

  .text {
    width: 496rpx;
    font-size: 28rpx;
    color: #999;
  }
}

.my-order .list .item .item-info .text .name {
  width: 326rpx;
  color: #282828;
}

.my-order .list .item .item-info .text .money {
  // color: #E93323;
  text-align: right;
}

.font_color {
  color: #e93323;
}

.my-order .list .item .totalPrice {
  font-size: 26rpx;
  color: #282828;
  text-align: right;
  margin: 27rpx 0 0 30rpx;
  padding: 0 30rpx 30rpx 0;
  border-bottom: 1rpx solid #eee;
}

.my-order .list .item .address {
  font-size: 26rpx;
  color: #282828;
  margin: 27rpx 0 0 30rpx;
  padding: 0 30rpx 30rpx 0;
  border-bottom: 1rpx solid #eee;
  display: flex;
  text-align: left;
  flex-direction: column;

  &_top {
    display: flex;
    align-items: center;
  }

  &_bottom {
    display: flex;
    align-items: center;
  }
}

.my-order .list .item .totalPrice .money {
  color: #e93323;
  font-size: 28rpx;
  font-weight: bold;
}

.my-order .list .item .bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content:space-between;
  align-items: center;
  gap: 12rpx;
  padding: 0 16rpx 10rpx 16rpx;
}

.my-order .list .item .bnt {
  min-width: 90rpx;
  max-width: 40vw;
  height: 40rpx;
  line-height: 40rpx;
  padding: 0 14rpx;
  border-radius: 10rpx;
  font-size: 22rpx;
  text-align: center;
  margin: 0;
  margin-bottom: 6rpx;
  box-sizing: border-box;
  white-space: nowrap;
  flex: 0 1 auto;
}

.my-order .list .item .cancelBnt {
  background: #f5f5f5;
  color: #1677ff;
  border: 1rpx solid #1677ff;
}

.my-order .list .item .qrCode {
  background: #1677ff;
  color: #fff;
  border: none;
}

.noCart {
  margin-top: 171rpx;
  padding-top: 0.1rpx;
}

.noCart .pictrue {
  width: 414rpx;
  height: 336rpx;
  margin: 78rpx auto 56rpx auto;
}

.noCart .pictrue image {
  width: 100%;
  height: 100%;
}

.icon-xiangyou {
  font-size: 24rpx;
}

.default_txt {
  font-size: 26rpx;
  color: #999;
  text-align: center;
}

.searchCon {
  padding: 10rpx 0rpx;
  align-items: center;

  .search {
    flex: 1;
    height: 60rpx;
    padding: 0 32rpx;
    border-radius: 36rpx;
    background: #f5f5f5;
    margin-left: 5px;

    .iconfont {
      margin-right: 16rpx;
      font-size: 30rpx;
      color: #999999;
    }

    .inputs {
      flex: 1;
      font-size: 28rpx;
      color: #333;
    }

    .placeholder {
      font-size: 26rpx;
      color: #ccc;
    }
  }

  .btn {
    width: 72rpx;
    height: 60rpx;
    line-height: 60rpx;
    margin-left: 20rpx;
    background: #ffffff;
    text-align: center;
    font-size: 30rpx;
    color: #282828;

    .iconfont {
      font-size: 32rpx;
      line-height: 72rpx;
      color: #666666;
    }
  }
}

.canvas {
  position: fixed;
  z-index: -5;
  opacity: 0;
}

/* 手机设备样式 */
@media screen and (max-width: 768px) {
  .my-order {
    margin-top: 100rpx !important;
    padding-bottom: env(safe-area-inset-bottom, 20rpx);
    .list {
      width: calc(94%) !important;
      margin: 0rpx auto 0 auto;
    }
  }
  .my-order .list {
    width: 92%;
    margin: 14rpx auto 0 auto;
  }
  .my-order .list .item {
    border-radius: 16rpx;
    box-shadow: 0 4rpx 24rpx rgba(0, 0, 0, 0.06);
    margin-bottom: 18rpx;
    border-bottom: 1rpx solid #f0f0f0;
    padding-bottom: 18rpx;
  }
  .my-order .list .item .title {
    font-size: 26rpx;
    height: 60rpx;
    padding: 0 16rpx;
  }
  .my-order .list .item .item-info {
    padding: 0 20rpx;
    margin-top: 16rpx;
    .nameBox {
      height: 100rpx;
    }
    .sku {
      width: 280rpx;
      font-size: 18rpx;
    }
    .text {
      width: 320rpx;
      font-size: 24rpx;
    }
  }
  .my-order .list .item .item-info .pictrue {
    width: 100rpx;
    height: 100rpx;
  }
  .my-order .list .item .item-info .pictrue image {
    border-radius: 10rpx;
  }
  .my-order .list .item .item-info .text .name {
    width: 220rpx;
    font-size: 22rpx;
    font-weight: 500;
  }
  .my-order .list .item .totalPrice {
    font-size: 20rpx;
    margin: 10rpx 0 0 10rpx;
    padding: 0 10rpx 10rpx 0;
  }
  .my-order .list .item .address {
    font-size: 22rpx;
    margin: 20rpx 0 0 20rpx;
    padding: 0 20rpx 20rpx 0;
  }
  .my-order .list .item .bottom {
    // height: 90rpx;
    min-height: 90rpx;
    max-height: 180rpx;
    padding: 0 20rpx;
  }
  .my-order .list .item .bottom .bnt {
    border-radius: 32rpx;
    font-size: 28rpx;
    min-width: 120rpx;
    padding: 0 24rpx;
    margin-left: 12rpx;
    height: 50rpx;
    line-height: 50rpx;
  }
  .my-order .list .item .bottom .bnt.cancelBnt {
    background: #f5f5f5;
    color: #888;
    border: none;
  }
  .my-order .list .item .bottom .bnt.qrCode {
    background: #1296db;
    color: #fff;
    border: none;
  }
  .my-order .list .item .bottom .bnt ~ .bnt {
    margin-left: 12rpx;
  }
  .noCart .pictrue {
    width: 300rpx;
    height: 240rpx;
    margin: 50rpx auto 40rpx auto;
  }
  .default_txt {
    font-size: 22rpx;
  }
  .address_text {
    // font-size: 22rpx;
    // max-width: 65vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* iPad设备样式 */
@media screen and (min-width: 769px) and (max-width: 1024px) {
  .my-order {
    margin-top: 150rpx !important;

    .list {
      width: calc(90%) !important;
      margin: 0rpx auto 0 auto;
    }
  }

  .my-order .list {
    width: 85%;
    margin: 20rpx auto 0 auto;
  }

  .my-order .list .item .item-info {
    padding: 0 40rpx;
    margin-top: 30rpx;
  }

  .my-order .list .item .item-info .pictrue {
    width: 140rpx;
    height: 140rpx;
  }

  .my-order .list .item .item-info {
    .nameBox {
      height: 140rpx;
    }

    .sku {
      width: 500rpx;
      font-size: 22rpx;
    }

    .text {
      width: 600rpx;
      font-size: 30rpx;
    }
  }

  .my-order .list .item .item-info .text .name {
    width: 400rpx;
    font-size: 30rpx;
  }

  .my-order .list .item .totalPrice {
    font-size: 28rpx;
    margin: 35rpx 0 0 40rpx;
    padding: 0 40rpx 40rpx 0;
  }

  .my-order .list .item .address {
    font-size: 28rpx;
    margin: 35rpx 0 0 40rpx;
    padding: 0 40rpx 40rpx 0;
  }

  .my-order .list .item .bottom {
    height: 120rpx;
    padding: 0 40rpx;
  }

  .my-order .list .item .bottom .bnt {
    width: 200rpx;
    height: 70rpx;
    line-height: 70rpx;
    font-size: 30rpx;
  }

  .my-order .list .item .bottom .bnt ~ .bnt {
    margin-left: 20rpx;
  }

  .my-order .list .item .title {
    height: 100rpx;
    padding: 0 40rpx;
    font-size: 32rpx;
  }

  .noCart .pictrue {
    width: 500rpx;
    height: 400rpx;
    margin: 100rpx auto 80rpx auto;
  }

  .default_txt {
    font-size: 30rpx;
  }
}

/* 大屏设备样式（iPad Pro等） */
@media screen and (min-width: 1025px) {
  .my-order {
    margin-top: 200rpx !important;

    .list {
      width: calc(80%) !important;
      margin: 0rpx auto 0 auto;
    }
  }

  .my-order .list {
    width: 75%;
    margin: 30rpx auto 0 auto;
  }

  .my-order .list .item .item-info {
    padding: 0 50rpx;
    margin-top: 40rpx;
  }

  .my-order .list .item .item-info .pictrue {
    width: 160rpx;
    height: 160rpx;
  }

  .my-order .list .item .item-info {
    .nameBox {
      height: 160rpx;
    }

    .sku {
      width: 600rpx;
      font-size: 24rpx;
    }

    .text {
      width: 700rpx;
      font-size: 32rpx;
    }
  }

  .my-order .list .item .item-info .text .name {
    width: 500rpx;
    font-size: 32rpx;
  }

  .my-order .list .item .totalPrice {
    font-size: 30rpx;
    margin: 40rpx 0 0 50rpx;
    padding: 0 50rpx 50rpx 0;
  }

  .my-order .list .item .address {
    font-size: 30rpx;
    margin: 40rpx 0 0 50rpx;
    padding: 0 50rpx 50rpx 0;
  }

  .my-order .list .item .bottom {
    height: 140rpx;
    padding: 0 50rpx;
  }

  .my-order .list .item .bottom .bnt {
    width: 220rpx;
    height: 80rpx;
    line-height: 80rpx;
    font-size: 32rpx;
  }

  .my-order .list .item .bottom .bnt ~ .bnt {
    margin-left: 25rpx;
  }

  .my-order .list .item .title {
    height: 120rpx;
    padding: 0 50rpx;
    font-size: 36rpx;
  }

  .noCart .pictrue {
    width: 600rpx;
    height: 480rpx;
    margin: 120rpx auto 100rpx auto;
  }

  .default_txt {
    font-size: 34rpx;
  }
}

@media (max-width: 500px) {
  .bnt {
    min-width: 70rpx;
    font-size: 20rpx;
    height: 36rpx;
    line-height: 36rpx;
    padding: 0 8rpx;
    max-width: 48vw;
  }
  .bottom {
    gap: 10rpx;
  }
}
</style>
